<template>
	<view class="task-container card">
		<view class="header">
			<view class="title">
				任务
				<view>提醒</view>
			</view>
			<view class="desc" @click="goPage('/my/task/task')">查看更多</view>
		</view>
		<view class="body">
			<view v-if="tipsList.length > 0">
				<view class="item" v-for="(item, index) in tipsList" @click="goPage('/tools/tips/info',{id: item.id})">
					<view class="title">
						<!-- 		<view class="checkbox">
							<wd-checkbox checked-color="#C91C1F" false-value="false" true-value="true"
								v-model="item.status" shape="square"></wd-checkbox>
						</view> -->
						<view class="text text-ellipsis">
							{{ item.title }}
						</view>
					</view>
					<!-- 		<view class="desc text-ellipsis2">
						{{ getInfoStr(item.info) }}
					</view> -->
				</view>
			</view>
			<wd-status-tip v-else image="content" tips="无数据" />
		</view>
	</view>
</template>
<script lang="ts">
	import { ref, defineComponent } from 'vue';
	import { getIndexTaskList } from "@/api/temp.ts"
	import { onShow } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter';
	export default defineComponent({
		name: 'CaseComponent',
		props: {
			// 定义props
			tipsList: {
				type: Array,
				default: () => [], // 默认值为空数组
			},
		},
		setup(props, { attrs, slots, emit }) {
			const router = useRouter(); // 获取路由实例
			const dataList = [
				{
					status: 'false'
				},
				{
					status: 'true'
				}
			];
			const taskList = ref([]); // 任务列表数据
			onShow(() => {
				getIndexTaskList().then(res => {
					console.log(res) // 打印任务列表数据
					taskList.value = res.list
				})
			})
			const getInfoStr = (info : string) => {
				/* 去除富文本中的html标签 */
				/* *、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/
				let content = info.replace(/<.+?>/g, '');

				/* 去除&nbsp; */
				content = content.replace(/&nbsp;/ig, '');

				/* 去除空格 */
				content = content.replace(/\s/ig, '');
				return content
			};
			const goPage = (url : any, params : any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params
				})
			}
			const tips = () => {
				// uni.showToast({ title: '请先登录', icon: 'none' });
				uni.$wdToast.error('暂未开放');
			};
			return {
				tips,
				goPage,
				taskList,
				dataList,
				getInfoStr
			};
		}
	});
</script>

<style lang="less" scoped>
	.task-container {
		margin-top: 20rpx; // 设置组件之间的间距
		// 样式定义
		padding: 20rpx; // 内边距
		width: calc(100% - 20rpx - 20rpx);

		.header {
			display: flex; // 使用flex布局，使标题和switch在同一行显示
			justify-content: space-between; // 使标题和switch分居两侧
			align-items: center; // 使标题和switch垂直居中
			padding-bottom: 15rpx; // 设置标题和switch之间的间距
			border-bottom: 2rpx solid #eeeeee;

			.title {
				font-size: 16px; // 设置标题字体大小
				font-weight: bold; // 设置标题字体粗细
				position: relative; // 设置position属性，以便设置伪元素定位
				display: flex; // 设置flex布局，使标题和下划线在同一行显示
				align-items: center; // 使标题和下划线垂直居中

				view {
					color: #c91c1f;
				}

				&::after {
					content: '';
					width: 130rpx;
					height: 4rpx;
					background: #c91c1f;
					display: inline-block;
					position: absolute;
					bottom: -15rpx;
					left: 0;
				}
			}

			.desc {
				font-family: PingFang;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}

		.body {
			padding-top: 20rpx;

			.item {
				padding: 23rpx 23rpx;

				.title {
					font-family: PingFang;
					font-weight: 500;

					color: #000000;
					display: flex; // 设置flex布局，使checkbox和文字在同一行显示
					align-items: center; // 使checkbox和文字垂直居中

					.checkbox {
						// 设置checkbox的样式，使其与文字对齐
						margin-right: 10rpx; // 设置checkbox与文字之间的间距
					}

					.text {
						width: 90%;
						font-size: 28rpx;
						// 设置文字的样式，使其与checkbox对齐
					}
				}

				>.desc {
					// margin-left: 10%;
					width: 90%;
					margin-top: 14rpx;
					font-family: PingFang;
					font-weight: 400;
					font-size: 21rpx;
					line-height: 36rpx;
					color: #999999;
				}
			}

			.item:nth-child(even) {
				background: #f2f2f2;
				border-radius: 7rpx;
			}
		}
	}
</style>